<template>
  <div class="report-traffic">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报告路况</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="事件类型" prop="region">
          <el-select placeholder="事件类型" v-model="typeData">
            <el-option label="刮擦" value="刮擦" />
            <el-option label="追尾" value="追尾" />
            <el-option label="碾压" value="碾压" />
            <el-option label="翻车" value="翻车" />
            <el-option label="失火" value="失火" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件地址">
          <el-input placeholder="请输入路况地址，包含事故路段" v-model="adress"></el-input>
        </el-form-item>
        <el-form-item label="建筑标识">
          <el-input placeholder="请输入事故最近的建筑标识" v-model="building"></el-input>
        </el-form-item>
        <el-form-item label="发生时间">
          <el-date-picker
            v-model="timeData"
            type="datetime"
            placeholder="Select date and time"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="事件描述" prop="desc">
          <el-input
            type="textarea"
            placeholder="请输入事故的具体信息"
            v-model="description"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleSubmitReport">确认</el-button>
        <el-button @click="handleCancelReport">取消</el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'
const store = useCommonStore()
const { isShowReport } = storeToRefs(store)
const data = JSON.parse(localStorage.getItem('data'))
const typeData = ref(null)
const adress = ref(null)
const building = ref(null)
const timeData = ref(null)
const description = ref(null)

const handleCancelReport = () => {
  isShowReport.value = false
}
const handleSubmitReport = () => {
  const formData = ref({
    name: data.username,
    data: typeData.value,
    adress: adress.value,
    building: building.value,
    time: timeData.value.toLocaleString(),
    description: description.value,
  })
  console.log(formData.value.time)
  console.log(timeData.value.toLocaleString())
  isShowReport.value = false
  axios.post('http://localhost:3000/api/information/add', formData.value).then((res) => {
    console.log(res)
    if (res.data.code === 200) {
      alert('报告成功')
    } else {
      alert('报告失败')
    }
  })
}
</script>

<style scoped>
.report-traffic {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background-color: rgb(40, 44, 52, 0.7);
}
.el-card {
  opacity: 1;
  width: 530px;
}
</style>
